<template>
  <div>
    <XmTable :config="tableConfig" :noWatchParams="noWatchParams" class="table" ref="table" @sort-change="handleSort">
      <div slot="filter">
        <el-form class="fl" :inline="true" ref="form" :model="noWatchParams">
          <el-form-item label="后台单号">
            <el-input v-model.trim="noWatchParams.xmbzNo" size="small" placeholder="后台单号" clearable></el-input>
          </el-form-item>
          <el-form-item label="平台单号">
            <el-input v-model.trim="noWatchParams.platformOrderId" size="small" placeholder="平台单号" clearable></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <CitySelect class="w-100" ref="citySelect" v-model="noWatchParams.cityId" size="small" placeholder="城市" clearable filterable></CitySelect>
          </el-form-item>
          <el-form-item label="申请人">
            <el-input v-model.trim="noWatchParams.operator" size="small" placeholder="申请人" clearable></el-input>
          </el-form-item>
          <el-form-item label="处理状态">
            <XmSelect v-model="noWatchParams.disposeState" size="small" placeholder="处理状态" :options="stateList" clearable filterable></XmSelect>
          </el-form-item>
          <el-form-item label="客户联系电话">
            <el-input v-model.trim="noWatchParams.phone" size="small" placeholder="客户联系电话" clearable></el-input>
          </el-form-item>
          <el-form-item label="业务类型">
            <XmSelect v-model="noWatchParams.type" size="small" placeholder="业务类型" :options="consultHappyServiceTypeList" clearable filterable></XmSelect>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="startAndEndTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              size="small"
              align="right"
              clearable
              @change="handleTimeChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button plain type="primary" @click="search" size="small" icon="el-icon-search" style="margin-left: 10px;">查询
            </el-button>
            <el-button plain @click="reset" size="small" icon="el-icon-delete" style="margin-left: 10px;">清空</el-button>
            <el-button plain icon="el-icon-plus" size="small" type="success" @click="add">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <template slot="column-complaintLevelName" slot-scope="{data}">
        <el-tag class="mr-5 mb-5" :type="getcomplaintLevelClass(data.complaintLevel)">
          {{data.complaintLevelName}}
        </el-tag>
      </template>
      <template slot="column-extJson" slot-scope="{data}">
        <div >
          <imageView :src="item" v-for="(item,index) in changeExtJsoncomplaint(data.extJson)" :key="index"
            class="w-80 h-80 mt-10" />
        </div>
      </template>
      <template slot="column-resultContent" slot-scope="{data}">
        <span class="fz-16 fw-bold" :class="data.disposeState == 1 ? 'c-70bd46' : data.disposeState == 2 ? 'c-red' : ''">{{ data.resultContent }}</span>
      </template>
      <template slot="column-reminder" slot-scope="{data}">
        <el-tag class="mr-5 mb-5" type="danger" v-if="data.reminder">
          已催办
        </el-tag>
      </template>
      <template slot="column-disposeState" slot-scope="{data}">
        <el-tag class="mr-5 mb-5" :type="stateMap[data.disposeState].type" v-if="stateMap[data.disposeState]">
          {{stateMap[data.disposeState].label}}
        </el-tag>
      </template>
      <template slot="column-operate" slot-scope="{data}">
        <el-button v-if="data.disposeState == 0" class="ml-0 mr-5 mb-5" size="mini" @click="edit(data)">
          编辑
        </el-button>
        <el-button class="ml-0 mr-5 mb-5" size="mini" @click="viewLog(data)">
          日志
        </el-button>
        <el-button class="ml-0 mr-5 mb-5" v-if="!data.reminder && data.disposeState == 0" size="mini" @click="reminder(data)">
          催办
        </el-button>
      </template>
    </XmTable>

    <addDialog ref="addDialog" @submit="search"></addDialog>
    <orderLogDialog ref="orderLogDialog" :config="{contentKey: 'content'}"></orderLogDialog>
  </div>
</template>

<script>
import { customerReminder, workAskLogList } from '@/api/workorder/consultHappy'
import tableConfig from './config/table'
import addDialog from './addDialog'
import orderLogDialog from '@/components/dialog/orderLogDialog'
import imageView from '@/components/image/imageView'
import {
  getCacheData, 
} from "@/const/cacheData"
const stateMap = {
  0: {
    label: '未处理',
    type: 'info',
  },
  1: {
    label: '同意',
    type: 'success',
  },
  2: {
    label: '不同意',
    type: 'danger',
  },
}
const stateList = [{
  label: '未处理',
  value: '0',
},{
  label: '同意',
  value: '1',
},{
  label: '不同意',
  value: '2',
}]

export default {
  data() {
    return {
      tableConfig,
      stateMap,
      stateList,
      cityId: '',
      noWatchParams: {
        xmbzNo: '',
        platformOrderId: '',
        operator: '',
        disposeState: '',
        cityId: '',
        deptName: '',
        phone: '',
        type: '',
        timeStart: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00"),
        timeEnd: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59"),
        sort: '',
        order: '',
      },
      startAndEndTime: [this.dayjs(new Date())
        .format("YYYY-MM-DD 00:00:00"), this.dayjs(new Date())
        .format("YYYY-MM-DD 23:59:59")],
      pickerOptions:{
        onPick: (obj) => {
          this.pickerMinDate = new Date(obj.minDate).getTime();
        },
        disabledDate:(time)=> {
          if (this.pickerMinDate) {
            const day1 =  31 * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate + day1;
            let minTime = this.pickerMinDate - day1;
            return time.getTime() > maxTime || time.getTime()<minTime;
          }
        }
      },
      consultHappyServiceTypeList: []
    };
  },
  methods: {
    fetch() {
      this.$refs.table.fetch()
    },
    search() {
      this.fetch()
    },
    handleSort(column) {
      if (column && column.order) {
        if (column.order == 'descending') {
          this.noWatchParams.sort = `${column.prop}`
          this.noWatchParams.order = 'desc'
        } else {
          this.noWatchParams.sort = `${column.prop}`
          this.noWatchParams.order = 'asc'
        }
      } else {
        this.noWatchParams.sort = undefined
        this.noWatchParams.order = undefined
      }
      this.fetch()
    },
    reset() {
      this.startAndEndTime = []
      this.noWatchParams = {
        xmbzNo: '',
        platformOrderId: '',
        operator: '',
        disposeState: '',
        cityId: '',
        phone: '',
        type: '',
        timeStart: '',
        timeEnd: '',
        sort: '',
        order: '',
      }
      this.$nextTick(() => {
        this.fetch()
      })
    },
    add() {
      this.$refs.addDialog.show({ type: 'add' })
    },
    edit(data) {
      this.$refs.addDialog.show({ type: 'edit', data})
    },
    reminder(data) {
      customerReminder({id: data.id}).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '催办成功!'
          });
          this.search()
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg
          });
        }
      })
    },
    handleTimeChange() {
      this.noWatchParams.timeStart = this.startAndEndTime && this.startAndEndTime[0]
      this.noWatchParams.timeEnd = this.startAndEndTime && this.startAndEndTime[1]
    },
    changeExtJsoncomplaint(list) {
      let imgList = []
      try {
        imgList = JSON.parse(list).img
      } catch (error) {
        console.error(error)
        imgList = []
      }
      return imgList
    },
    handBigPhoto(src) {
      this.$refs.imgDialog.show(src)
    },
    viewLog(data) {
      this.$refs.orderLogDialog.visible = true
      workAskLogList({
        workAskId: data.id,
        type: 1
      }).then(res => {
        const logList = res.data.data || []
        this.$refs.orderLogDialog.showByLogList({logList})
      })
    },
    getcomplaintLevelClass (complaintLevel) {
      if (complaintLevel > 3) {
        return 'danger'
      }
      if (complaintLevel > 2) {
        return 'warning'
      }
      return 'info'
    },
  },
  async created() {
    const list = await getCacheData('consultHappyServiceTypeList')
    this.consultHappyServiceTypeList = list.map(item => {
      return {
        ...item,
        value: item.dictKey,
        label: item.dictValue,
      }
    })
  },
  components: {
    addDialog,
    imageView,
    orderLogDialog
  }
};
</script>
<style lang="scss" scoped>

</style>